<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/functionDemo/roleManage/roleManage.js" charset="utf-8"></script>
<style type="text/css">
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>

<div id="roleManageDemo">
    <div title="Demo"  tabid='tab2'>
    	<h4><span>实例：角色管理</span></h4>
    	<div>
			<span  style="color: olive;">备注：生成角色管理，由于涉及到数据库操作，该Demo只展示界面样式，以及所具有的功能。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 实际操作请点击：系统管理->用户和权限管理->角色管理</span>
		</div><br>
    	<div>
		<form id="roleCondForm" class="init ccay-form">
			<div class="ccay-form-body">
	        <ul>
	        <!--条件输入区域-->
			  <li class="ccay-form-row">
				    <samp class="i18n" i18nKey="ccay.security.label.roleName" ></samp>
				    <span class="ccay-form-input">
				          <input type="text"  name="roleName" maxLength="200"/>
				    </span>	
			  </li>
	      </ul>
	      </div>
	      <!--条件按钮区域-->
	      <div class="ccay-operate">
		 		<span id="btnSearch" class="default ccay-button" ccayPermission="Service$Role$read">
		 			<a class="ccay-icon search"></a>
		 			<label class="i18n" i18nkey="ccay.common.button.search"></label>
		 		</span>
				<span class="init button ccay-button reset" onclick="Ccay.example.functionDemo.clear();">
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nkey="ccay.common.button.clear"></label>
				</span>
			</div>
		</form> 
		<!--数据表格-->
		<div class="ccay-grid">
	       <div class="ccay-grid-toolbar">
	       		<span id="btnRoleAdd" class="ccay-button  hasPermission" ccayPermission="Service$Role$create">
			 		<a class="ccay-icon add"></a>
			 		<label class="i18n" i18nKey="ccay.common.button.add"></label>
			 	</span>
			    <span id="btnRoleDelete" class="ccay-button hasPermission" ccayPermission="Service$Role$delete" onclick="Ccay.example.functionDemo.showMsg(this)">
			 		<a class="ccay-icon pre-del"></a>
			 		<label class="i18n" i18nKey="ccay.common.button.gridDelete"></label>
			 	</span>
		    	<span id="btnRoleSave" class="ccay-button hasPermission" ccayPermission="Service$Role$delete|Service$Role$update|Service$Role$create">
			 		<a class="ccay-icon save"></a>
			 		<label class="i18n" i18nKey="ccay.common.button.save"></label>
			 	</span>
	       </div>
		   <div id="roleGrid" ></div>
		</div>
		</div><br>
		<h3>html code <a class="link-special" onclick="Ccay.Common.toggle(this,'#html1')" >点击查看</a></h3>
		<div id="html1" class="codeArea" style="display: none;">
			<pre id="html01">
<span class="showClew">&lt;!-- 角色管理列表的搜索表单，需设置表单的Id --></span>
&lt;form <span class="spanShow">id="roleCondForm"</span> class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
		<span class="showClew">&lt;!-- 条件输入区域 --></span>
		&lt;li class="ccay-form-row">
			&lt;samp class="i18n" i18nKey="ccay.security.label.roleName" ></samp>
			&lt;span class="ccay-form-input">
				<span class="showClew">&lt;!-- 标签的name属性值必须为对象的属性名称 --></span>
				&lt;input type="text"  <span class="spanShow">name="roleName"</span> maxLength="200"/>
			&lt;/span>	
		&lt;/li>
		&lt;/ul>
	&lt;/div>
	<span class="showClew">&lt;!-- 条件按钮区域 --></span>
	&lt;div class="ccay-operate">
		<span class="showClew">&lt;!-- 搜索按钮，需设置按钮Id --></span>
		&lt;input <span class="spanShow">id="btnSearch"</span> type=button  class="init i18n hasPermission" i18nKey="ccay.common.button.search" 
				ccayPermission="Service$Role$read"/>
		<span class="showClew">&lt;!-- 重置按钮 --></span>
		&lt;input type="reset" class="i18n jbutton"  i18nKey="ccay.common.button.clear" 
				onclick="Ccay.example.functionDemo.clear();"/>
	&lt;/div>
&lt;/form>
<span class="showClew">&lt;!-- 数据表格区域 --></span>
&lt;div class="ccay-grid">
	<span class="showClew">&lt;!-- 数据表格操作区域 --></span>
	&lt;div class="ccay-grid-toolbar">
		<span class="showClew">&lt;!-- 增加按钮，需设置按钮Id --></span>
		&lt;input <span class="spanShow">id="btnRoleAdd"</span> class="init i18n hasPermission" ccayPermission="Service$Role$create" 
				i18nKey="ccay.common.button.add" type=button />
		<span class="showClew">&lt;!-- 删除按钮，需设置按钮Id --></span>
		&lt;input <span class="spanShow">id="btnRoleDelete"</span> class="init i18n hasPermission" ccayPermission="Service$Role$delete"  
				i18nKey="ccay.common.button.gridDelete" type=button />
		<span class="showClew">&lt;!-- 保存按钮，需设置按钮Id --></span>
		&lt;input <span class="spanShow">id="btnRoleSave"</span> class="init i18n hasPermission"  
				ccayPermission="Service$Role$delete|Service$Role$update|Service$Role$create" 
				i18nKey="ccay.common.button.save" type=button />
	&lt;/div>
	<span class="showClew">&lt;!-- 提供div供grid进行初始化，需设置div的Id--></span>
	&lt;div <span class="spanShow">id="roleGrid"</span> >&lt;/div>
&lt;/div>
			</pre>
		</div><br />
		<h3>js code <a class="link-special" onclick="Ccay.Common.toggle(this,'#js1')">点击查看</a></h3>
		<div id="js1" class="codeArea" style="display: none;">
			<pre id="js01">
<span class="showClew">//配置grid的参数</span>
var gridOptions={
	editPermission:"Service$Role$update", <span class="showClew">// 设置角色管理grid的编辑权限</span>
	onRowCheck:selectedRecords, <span class="showClew">// 设置选中某一行之后所执行的事件</span>
	columns:[
		{id:'chk', <span class="showClew">// id设置为'chk'说明该列是选择列</span>
		 isCheckColumn:true, <span class="showClew">// isCheckColumn设置该列是否是选择列</span>
		 multiSelect:true, <span class="showClew">// multiSelect设置该列是否允许多选，<span class="spanShow">当isCheckColumn:true时有效</span></span>
		 align:"center", <span class="showClew">// align设置该列单元格内容显示位置</span>
		 frozen:true},  <span class="showClew">// frozen设置该列是否是冻结列</span>
		{id: 'opration', <span class="showClew">// id设置为'opration'说明该列是操作列</span>
		 header:"ccay.common.label.operation", <span class="showClew">// header设置该列列头显示名称</span>
		 frozen:true, width:60, <span class="showClew">// width设置该列宽度</span>
		 sortable:false, <span class="showClew">// sortable设置该列是否进行排序</span>
		 resizable:false, <span class="showClew">// resizable设置该列是否允许改变列的大小</span>
		 renderer:my_accredit_renderer, <span class="showClew">// renderer设置该列进行自定义渲染器方法</span>
		 ccayPermission:"Service$Security.operation$update"}, <span class="showClew">// ccayPermission设置该列所具有的权限</span>
		{id: 'roleName', <span class="showClew">// id设置绑定数据源中的某一列</span>
		 header:"ccay.security.label.roleName",
		 editor:{type:"text", <span class="showClew">// editor设置该列可编辑；type设置该列编辑类型</span>
		 	validRule:['R',['MAXL',200]]}}, <span class="showClew">// validRule设置该列的验证规则</span>
		{id: 'roleDesc' , header:"ccay.common.label.description",editor:{type:"text",validRule:[['MAXL',2000]]}},
		{id: 'status' , width:90,header:"ccay.security.role.valid",align:"center",
		 renderer:Ccay.UI.Grid.Renderer.valid, <span class="showClew">// Ccay.UI.Grid.Renderer.valid内置的渲染器</span>
		 editor:{},format:{type:"valid"}}, <span class="showClew">// format设置该列进行格式话；type设置该列格式化类型</span>
		{id: 'applyStatus' , header:"ccay.security.label.roleApplicationStatus",align:"center", 
		 renderer:Ccay.UI.Grid.Renderer.valid,editor:{},format:{type:"valid"}},
		{id: 'owner' , header:"ccay.common.label.owner",editor:{},format:{type:"jldap"}},
		{id: 'defaultUrl' , header:"ccay.security.label.roleDefaulturl",
		 editor:{type:"textarea",width:"200px",height:"50px",validRule:[['MAXL',300]]}},
		{id: 'lastUpdateUserCN', width:140, header:"ccay.common.label.lastUpdatedBy",format:{type:"personInfo"}},
		{id: 'lastUpdateDate' ,width:140, header:"ccay.common.label.lastUpdatedDate",align:"center",
		 renderer:Ccay.Format.toDateBefore} <span class="showClew">// Ccay.Format.toDateBefore内置的日期渲染器</span>
	],
	<span class="showClew">// 点击增加按钮时，grid增加一行默认数据，其属性名称和columns的id值对应</span>
	defaultRecord:{<span class="spanShow">roleName</span>:"",<span class="spanShow">roleDesc</span>:"",<span class="spanShow">status</span>:1,<span class="spanShow">applyStatus</span>:1,<span class="spanShow">defaultUrl</span>:""},	
	<span class="showClew">// 角色管理grid的操作设置，search：查询；add：增加；del：删除；save：保存</span>	
	operation:{
		search:{
			btn:'#btnSearch', <span class="showClew">//btn设置查询按钮，其值为html中搜索按钮Id</span>
			panel:'#roleCondForm', <span class="showClew">//panel设置查询的表单，其值为html中搜索表单的Id</span>
			url:'services/ccay/security/role/list/page/{0}/{1}' <span class="showClew">//url设置grid查询的数据源</span>
		},
		add:{
			btn:'#btnRoleAdd' <span class="showClew">//btn设置增加按钮，其值为html中搜索按钮Id</span>
		},
		del:{
			btn : '#btnRoleDelete' <span class="showClew">//btn设置删除按钮，其值为html中搜索按钮Id</span>
		},
		save:{
			btn:'#btnRoleSave' <span class="showClew">//btn设置保存按钮，其值为html中搜索按钮Id</span>
		}
	}
};

<span class="showClew">//通过配置的gridOptions参数进行grid的初始化</span>
$("#roleGrid").ccayGrid(gridOptions);
			</pre>
		</div>
		
	</div>
</div>